<template>
    <div class="teamAdd">
        <div class="teamAdd_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">{{text}}<i class="el-icon-close"></i></div>
		</div>
		<div class="teamAdd_title">
			<div class="teamAdd_title_left">团队成员/<i>{{text}}</i></div>
			<div class="teamAdd_title_right">
				<button class="teamAdd_title_right_btn" @click="handerBase">返回</button>
			</div>
		</div>
        <!-- 添加 -->
         <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="1">
                <div class="addBox">
                    <div class="item">
                        <span class="tit">姓名</span>
                        <el-input v-model="name" placeholder="请输入姓名"></el-input>
                    </div>
                    <div class="item">
                        <span class="tit">手机号</span>
                        <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
                    </div>
                    <div class="item">
                        <span class="tit">头像</span>
                        <el-upload
                            action="/api/client/base/uploadfile"
                            list-type="picture-card"
                            :file-list="avatar"
                            :before-upload="beforeAvatarUpload"
                            :auto-upload="true"
                            :limit="1"
                            :headers="myHeaders"
                            :on-success="handleAvatarSuccess"
                            :on-preview="handlePictureCardPreview"
                            accept="image/jpeg, image/jpg, image/gif, image/png"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </div>
                <!-- 添加按钮 -->
                <!-- <div class="btn">
                    <el-button type="primary" @click="toAdd">提交</el-button>
                </div> -->
            </el-tab-pane>
            <el-tab-pane label="在线工地" v-if="staffId" name="2">
                <!-- <div class="lineConstr">
                    <h4>施工时间</h4>
                    <h4>职位</h4>
                    <h4>小区</h4>
                    <h4>进度</h4>
                </div>
                <div class="lineConstr" v-for="(item,index) in lineSiteList" :key="index">
                    {{$moment(item.build_start_time*1000).format('YYYY-MM-DD')}}
                    <span>{{item.position==1?'管家':'工长'}}</span>
                    <span>{{item.estate}}</span>
                    <span>{{item.progress}}</span>
                </div> -->
                <el-table
                    :data="lineSiteList"
                    style="width: 50%">
                    <el-table-column
                        align="center"
                        prop="build_start_time"
                        label="施工时间"
                        :formatter="siteTime"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="position"
                        label="职位"
                        :formatter="sitePosition"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="estate"
                        label="小区">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="progress"
                        label="进度">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data(){
        return{
            name:'',
            mobile:'',
            avatar:[],
            text:'新增成员',
            myHeaders: {
              'access-token': this.$store.state.token  , //这里重新定义了请求头
              'Authorization': this.$store.state.token ,
              'user-id':this.$store.state.user_id
            },
            dialogImageUrl: '',
            dialogVisible: false,
            activeName:'1',
            staffId:null,
            lineSiteList:[]
        }
    },
    mounted() {
        this.staffId = this.$route.query.staffId
        if(this.staffId){
            this.text = '成员详情'
            this.getStaffInfo()
            // this.getOnlineSite()
        }
    },
    methods:{
        // 获取员工信息
        getStaffInfo(){
            this.$http.post('/api/admin/decoration/Builder/view',{id:this.staffId}).then(res=>{
                console.log(res,'员工信息');
                if(res.code==1){
                    this.name = res.data.name;
                    this.mobile = res.data.phone;
                    this.avatar.push({
                        url:res.data.avatar.path,
                        id:res.data.avatar.id
                    })
                }
            })
        },
        // 获取在线工地数
        getOnlineSite(){
            this.$http.post('/api/admin/decoration/Builder/onlineSite',{id:this.staffId}).then(res=>{
                console.log(res,'在线工地');
                if(res.code==1){
                    this.lineSiteList = res.data?res.data:[]
                }
            })
        },
        // 表格中施工时间处理
        siteTime(row, column, cellValue, index){
            // console.log(cellValue);
            return this.$moment(cellValue*1000).format('YYYY-MM-DD')
        },
        // 表格中职位处理
        sitePosition(row, column, cellValue, index){
            if(cellValue==1){
                return '管家'
            }else{
                return '工长'
            }
        },

        handleRemove(file, fileList) {
            this.avatar = fileList
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleAvatarSuccess(res, file,fileList) {
            this.avatar = fileList  
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传商品图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        // 添加按钮
        toAdd(){
            let team_id = localStorage.getItem('sid')
            let avatarId = []
            this.avatar.map(item=>{
                if(item.response){
                    avatarId.push(item.response.data.id)
                }else{
                    avatarId.push(item.id)
                }
            })
            let params = {
                team_id,
                id:this.staffId,
                name:this.name,
                phone:this.mobile,
                avatar:avatarId.join(',')
            }
            console.log(this.params,'添加员工数据');
            let url = this.staffId?'/api/admin/builder/builder/edit':'/api/admin/builder/Builder/add';
            this.$http.post(url,params).then(res=>{
                console.log(res,'新增结果');
                if(res.code==1){
                    this.$message.success(this.staffId?'修改成功':'添加成功')
                    this.$router.back(1)
                }else{
                    this.$message.warning(res.msg)
                }
            })
        },
        // 选择tabs
        handleClick(e){
            console.log(e,'tabs切换');
            if(e.name=='2'){
                this.getOnlineSite()
            }
        },
        // 返回
        handerBase(){
            this.$router.back(1)
        },
    }
}
</script>
<style lang="less">
@import 'teamAdd.less';
</style>

